/*
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 *
 * The Apereo Foundation licenses this file to you under the Educational
 * Community License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License
 * at:
 *
 *   http://opensource.org/licenses/ecl2.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 * License for the specific language governing permissions and limitations under
 * the License.
 *
 */


.step-by-step {

    $height: 100px;
    background: $modal-nav-bg-color;
    border-bottom: 1px solid $modal-nav-border-color;
    height: $height;
    text-align: center;
    position: relative;
    overflow: hidden;

    // Line
    &:before {
        content: "";
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 1px;
        background: $main-border-color;
        @include linear-gradient(
            left,
            rgba($modal-nav-border-color, 0) 5%,
            rgba($modal-nav-border-color, 1) 25%,
            rgba($modal-nav-border-color, 1) 75%,
            rgba($modal-nav-border-color, 0) 95%
        );
    }

    > a {
        color: $modal-nav-link-color;
        margin: 0 10px;
        position: relative;
        line-height: $height + 30;
        @include user-select(none);

        // Dot
        &:after {
            content: "";
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -5px;
            background: $modal-nav-link-color;
            border-radius: 50%;
            width: 12px;
            height: 12px;
        }

        // First line
        &:first-child:before {
            @include linear-gradient(left, $modal-nav-bg-color, $modal-nav-border-color);
        }

        // Last line
        &:last-child:before {
            @include linear-gradient(left, $modal-nav-border-color, $modal-nav-bg-color);
        }

        // Active step
        &.active {
            color: $modal-nav-link-active-color;
            font-weight: 600;

            // Active Dot
            &:after {
                width: 22px; height: 22px;
                background: $modal-nav-link-active-color;
                margin-left: -11px; top: -25px;
            }
        }

        // Not complete dot
        &.not-complete:after {
            background: #92a0ab;

            // Generated by http://www.colorzilla.com/gradient-editor/
            background: -moz-radial-gradient(center, ellipse cover,  rgba(238,239,240,1) 35%, rgba(146,160,171,1) 40%);
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(35%,rgba(238,239,240,1)), color-stop(40%,rgba(146,160,171,1)));
            background: -webkit-radial-gradient(center, ellipse cover, rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%);
            background: -o-radial-gradient(center, ellipse cover,  rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%);
            background: -ms-radial-gradient(center, ellipse cover,  rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%);
            background: radial-gradient(ellipse at center,  rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%);
        }
    }
}
